<template>
  <BaseCard class="h-full">
    <template #header>
      <div class="flex justify-between">
        <span class="title">办事进度</span>
        <el-button type="primary" size="small" @click="gotoMore">更多</el-button>
      </div>
    </template>
    <div class="list-wrap">
      <div class="head flex">
        <div class="flex-1">标题</div>
        <!-- <div>待办类型</div> -->
        <div>办理模块</div>
        <div>申请时间</div>
        <div>状态</div>
      </div>
      <div class="list-items" v-loading="loading" v-if="processScheduleList.length > 0">
        <div class="item flex" v-for="item in processScheduleList">
          <div class="flex-1 truncate" @click="openDetail(item)">
            {{ item.businessName }}
          </div>
          <!-- <div> {{item.largeModule}}</div> -->
          <div>{{ item.moduleNameShow }}</div>
          <div>{{ item.createTime }}</div>
          <dict-tag :options="bpm_process_instance_status" :value="item.status" />
        </div>
      </div>
      <el-empty class="max-h-[220px]" v-else description="暂无数据" />
    </div>
  </BaseCard>
  <ViewPage ref="ViewPageRef" />
</template>

<script setup name="WorkProgress">
import { computed } from "vue";
import BaseCard from "./BaseCard.vue";
import * as homeApi from "@/api/home/index";
import { formatPast } from "@/utils/formatTime";
import ViewPage from "@/views/details/ViewPage"; //详情页
const ViewPageRef = ref();

const router = useRouter();
const { proxy } = getCurrentInstance();
const { bpm_process_instance_status } = proxy.useDict("bpm_process_instance_status");
const processScheduleList = ref([]);
const queryParam = reactive({
  pageNum: 1,
  pageSize: 6,
  isAsc: undefined,
  orderBy: undefined,
  orderByColumn: undefined,
});
const loading = ref(true);
onMounted(() => {});
const getList = async () => {
  let res = await homeApi.processSchedule(queryParam);
  if (res) {
    processScheduleList.value = res.rows;
    loading.value = false;
    console.log("processScheduleList", processScheduleList.value);
  }
};

//查看详情
function openDetail(row) {
  ViewPageRef.value.view(row);
}

getList();
const processColorMap = {
  submit: "#5AD8A6",
  pending: "#409EFF",
  end: "#CDCDCD",
};

const gotoMore = () => {
  const obj = { path: "/home/WorkProgressList/", name: "WorkProgressList" };
  router.push(obj);
};
const processColor = computed(() => {
  return processColorMap["submit"];
});
</script>

<style scoped lang="scss">
@import url("../index.scss");
.progress-icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5ad8a6;
}
</style>
